@import "color";
@import "layout";

$body-width: 2518.2px;
$body-height: 1136px;

$subtitle-div-max-width: 1000px;
$subtitle-div-height: 150px;

$knowledge-div-width: 1745px;
$knowledge-div-height: 150px;
$knowledge-item-div-width: $knowledge-div-height * 3.13;
$knowledge-item-stack-div-height: 101.4px;
$knowledge-item-stack-div-width: 305.08px;

@mixin knowledge-item-div($box-color, $border-color) {
  @include flex-hori-verti-center();
  background-color: $box-color;
  width: $knowledge-item-div-width;
  height: $knowledge-div-height;
  border-radius: 20px;
  border: solid 3px $border-color;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 45px;
  font-family: "Microsoft YaHei", serif;
  color: $font-color;
  margin-right: 28px;
}

@mixin knowledge-item-stack-div($box-color, $border-color) {
  background-color: $box-color;
  width: $knowledge-item-stack-div-width;
  height: $knowledge-item-stack-div-height;
  border-radius: 13px;
  border: solid 2px $border-color;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 29px;
  font-family: "Microsoft YaHei", serif;
  color: $font-color;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 21px;
}

.subtitle {
  @include position-abs-bottom(12%);
  @include flex-hori-center();
  width: $subtitle-div-max-width;
  height: $subtitle-div-height;
  user-select: none;
}